<script lang="ts" setup>
	//订单详情
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let postId = ref()
	let detail = ref(null)
	onLoad((option) => {
		postId.value = JSON.parse(option.item).id
		getDetail()
	})
	const routerLink = (e, item, id = "") => {
		router.push({
			name: e,
			params: {
				item: JSON.stringify(item),
				id,
				all: 0
			}
		})
	}
	const jihuan = (e, item, id = "") => {
		item.info.skuStr = null
		item.info.notes = null
		router.push({
			name: e,
			params: {
				item: JSON.stringify(item),
				all: 0,
				id,
			}
		})
	}
	onShow(() => {
		getDetail()
	})
	const getDetail = () => {
		proxy.$req('GET', proxy.$api.orderDetail, {
			id: postId.value,
		}).then((res) => {
			console.log(res);
			detail.value = res.result
		})
	}
	const copy = (e) => {
		uni.setClipboardData({
			data: e,
			success: function () {
				console.log('success');
			}
		});
	}
	const closeShou = (e) => {
		//取消售后
		console.log(e);
		proxy.$req('POST', proxy.$api.closeShou, {
			id: e.id,
			refundStatus: -1
		}).then((res) => {
			console.log(res);
			uni.$u.toast(res.message)
			if (res.success) {
				getDetail()
			}
		})
	}
	const confirmShou = (e) => {
		//确认收货
		console.log(e);
		proxy.$req('POST', proxy.$api.userConfirmShou, {
			id: e.id,
			// status: 4
		}).then((res) => {
			console.log(res);
			uni.$u.toast(res.message)
			if (res.success) {
				getDetail()
			}
		})
	}
	const closeOrder = (e) => {
		//取消订单
		console.log(e);
		proxy.$req('POST', proxy.$api.orderEditShop, {
			id: e.id,
			status: -2
		}).then((res) => {
			console.log(res);
			uni.$u.toast(res.message)
			if (res.success) {
				getDetail()
			}
		})
	}
	let modalShow = ref(false)
	// const jihuan = () => {
	// 	router.push({
	// 		name: 'applyForJihuan',
	// 		params: {
	// 			id: detail.value.id
	// 		}
	// 	})
	// }
	const nowPay = (e) => {
		//立即支付
		// #ifdef APP-PLUS
		plus.runtime.openURL(e)
		console.log('app');
		// #endif
		// #ifdef H5
		window.open(e)
		console.log('h5');
		// #endif
	}
</script>
<template>
	<view class="all" v-if="detail!=null">
		<view class="addressBox" v-if="detail.orderInfoList[0].isType!=null">
			<view class="">
				<text style="margin-right: 30rpx;">{{ detail.realName }}</text>
				<text>{{ detail.userPhone }}</text>
			</view>
			<view class="addressDe u-line-2">
				{{ detail.userAddress }}
			</view>
		</view>
		<view class="boxCon">
			<view class="boxAll" v-for="(it,key) in detail.orderInfoList" :key="key">
				<view class="con">
					<image class="conL"
						:src="it.sku!=null?it.sku.logo:detail.orderType!=2?it.info.image:JSON.parse(it.info.images)[0].url"
						mode=""></image>
					<view class="conR">
						<view class="rl c-flex-center-start">
							<text class="u-line-1"
								style="font-size: 28rpx;font-weight: 500;">{{ it.productName }}</text>
							<text
								style="font-size: 24rpx;color: rgba(0,0,0,0.45);padding-left: 32rpx;margin-top: 14rpx;">规格：{{ it.sku!=null?it.sku.specIdsName:'' }}</text>
						</view>
						<view class="rr">
							<text class="intFont"><text style="font-size: 20rpx;">￥</text> {{ it.price }}</text>
							<text>×{{ it.cartNum }}</text>
						</view>
					</view>
				</view>
				<view class="btnCon r-flex-end-center"
					v-if="(detail.status==4||detail.status==3||detail.status==2)&&detail.refundStatus==0&&detail.orderType==0"
					@click.stop="routerLink('choseAfterSale',it,detail.id)">
					<text>申请售后</text>
				</view>
				<view class="btnCon r-flex-end-center"
					v-if="detail.status==4&&detail.sendbackStatus==0&&detail.orderType==1"
					@click.stop="jihuan('applyForJihuan',it,detail.id)">
					<text>寄还</text>
				</view>
			</view>
		</view>
		<view class="infoContainer">
			<view class="infoBox">
				<view class="infoItem">
					<text>商品总额</text>
					<text class="intFont"><text style="font-size: 20rpx;">￥</text>{{ detail.totalPrice }}</text>
				</view>
				<view class="infoItem">
					<text>优惠券</text>
					<text class="intFont"><text style="font-size: 20rpx;">￥</text>{{ detail.couponPrice }}</text>
				</view>
				<!-- <view class="infoItem">
					<text>商品折扣卷</text>
					<text class="intFont"><text style="font-size: 20rpx;">￥</text>{{ detail.deductionPrice }}</text>
				</view> -->
				<view class="infoItem">
					<text>运费</text>
					<text class="intFont"><text style="font-size: 20rpx;">￥</text>{{ detail.freightPrice }}</text>
				</view>
				<view class="infoItem">
					<text>付款总额</text>
					<text class="intFont" style="color: #F22F19;font-size: 44rpx;"><text
							style="font-size: 20rpx;">￥</text>{{ detail.payPrice }}</text>
				</view>
			</view>
			<view class="orderInfo">
				<view class="numCopy c-flex-start-start">
					<view class="ncItem r-flex-between-center">
						<text>订单编号</text>
						<text>{{ detail.tradeNo }} | <text style="font-size: 24rpx;font-weight: 400;color: #333333;"
								@click="copy(detail.tradeNo)">复制</text> </text>
					</view>
					<view class="ncItem r-flex-between-center">
						<text>下单时间</text>
						<text>{{ detail.addTime }}</text>
					</view>
					<view class="ncItem r-flex-between-center">
						<text>付款时间</text>
						<text>{{ detail.payTime ||  '等待支付'}}</text>
					</view>
					<view class="ncItem r-flex-between-center" v-if="detail.deliveryTime">
						<text>发货时间</text>
						<text>{{ detail.deliveryTime }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<text class="btnn" v-if="detail.status==1" @click="closeOrder(detail)">
				取消订单
			</text>
			<text class="btnn" v-if="detail.status==1" @click="nowPay(detail.payUrl)">
				立即支付
			</text>
			<text class="btnn" v-if="detail.status==2">
				联系客服
			</text>
			<text class="btnn" v-if="detail.status==3" @click.stop="modalShow=true;">
				查看物流
			</text>
			<text class="btnn" v-if="detail.status==3" @click="confirmShou(detail)">
				确认收货
			</text>
			<!-- <text class="btnn" v-if="detail.status==6" @click="jihuan">
				寄还
			</text> -->
			<text class="btnn" v-if="detail.status==4&&detail.sendbackStatus!=0"
				@click.stop="routerLink('jihuanDetail',detail)">
				寄还详情
			</text>
			<text class="btnn" v-if="detail.status==4" @click.stop="routerLink('evaluate',detail)">
				评价
			</text>
			<text class="btnn" v-if="detail.status==-1" @click="closeShou(detail)">
				取消申请
			</text>
			<text class="btnn" v-if="detail.status==-1" @click.stop="routerLink('afterSaleDetail',detail)">
				退款详情
			</text>
		</view>
	</view>
	<u-modal :show="modalShow" title="物流单号" width="540rpx">
		<view style="font-size: 28rpx;font-weight: 400;color: rgba(0,0,0,0.45);text-align: center;">
			快递公司：{{ detail.deliveryName ||''}}；物流单号：{{ detail.deliveryId ||''}}，可复制号联系客服查询
		</view>
		<template #confirmButton>
			<view class="r-flex-between-center">
				<view style="width: 206rpx;height: 88rpx;line-height: 88rpx;background: rgba(255,255,255,0);border: 2rpx solid #CB645E;text-align: center;
					border-radius: 8rpx;font-size: 32rpx;font-weight: 500;color: #CB645E;" @click.stop="modalShow=false">
					关闭
				</view>
				<view
					style="width: 206rpx;height: 88rpx;line-height: 88rpx;background: #CB645E;border-radius: 8rpx;text-align: center;color: #fff;"
					@click="copy(detail.deliveryId)">
					复制单号
				</view>
			</view>
		</template>
	</u-modal>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
		padding-bottom: 150rpx;
	}

	view {
		box-sizing: border-box;
	}

	.all {
		width: 100%;
		padding: 0 30rpx;

		.addressBox {
			width: 686rpx;
			padding: 20rpx 0;
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 32rpx 24rpx;
			margin-top: 16rpx;
		}

		.addressDe {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
	}

	.boxCon {
		padding: 32rpx;
		margin: 20rpx auto;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

	}

	.boxAll {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-bottom: 32rpx;

		.con {
			width: 100%;
			height: 176rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.conL {
				width: 176rpx;
				height: 176rpx;
			}

			.conR {
				width: 426rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.rl {
					width: 338rpx;
					font-size: 28rpx;
				}

				.rr {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28rpx;
				}
			}
		}

		.btnCon {
			text {
				width: 160rpx;
				height: 54rpx;
				line-height: 54rpx;
				text-align: center;
				display: inline-block;
				background: rgba(255, 255, 255, 0);
				border-radius: 12rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.25);
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.65);
			}
		}

	}

	.infoContainer {
		padding: 16rpx 32rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
	}

	.infoBox {
		.infoItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 96rpx;
		}
	}

	.orderInfo {
		padding: 38rpx 0;
		font-size: 26rpx;
		color: #909399;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);

		.numCopy {

			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			.ncItem {
				width: 100%;
				height: 56rpx;

				text:nth-child(1) {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}

				text:nth-child(1) {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
				}
			}
		}
	}

	.btn {
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: right;
		padding: 32rpx 32rpx;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		background: #FFFFFF;

		.btnn {
			display: inline-block;
			width: 160rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: rgba(255, 255, 255, 0);
			border-radius: 12rpx;
			border: 2rpx solid rgba(0, 0, 0, 0.25);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.65);
			margin-left: 32rpx;
		}
	}
</style>